// 登录做校验步骤分析
 1: 用form包住输入框 
 2：绑定 v-model与rules rules是一个对象包含一些数组 
 3：写出验证规则
 4：定义一个name值 给获取验证码绑定一个点击事件 那个输入框要做局部校验就给那个输入框加一个name值
 5：点击确定按钮的全局表单验证
-----------------------------------------------------------------------------------------------------------------

 封装axios 
 1: 设置一个axios的create 设置了基地址
 2：写拦截器 请求拦截器 与 响应拦截器
 3：暴露出去axios副本 
 4：创建loing.js 
 5:导入axios副本
 6: 封装了一个获取验证码的api 
 7：暴露出api方法 
 8：导入api方法
 9：api方法调用并传参 
 -----------------------------------------------------------------------------------------------------------------

 
 登录页面
1：当点击获取验证码的时候 要有一个倒计时时间
2：使用定时器 3：一开始就--，一开始倒计时就不可点击 一直点会发送很多次请求
4：进行倒计时是--处理，就是开始倒计时
5：判断：当时间<=0,还原时间，同时清理倒计时
6：在获取验证码标签里面v-if判断定时器如果等于5就显示获取验证码 脑补一下就是时间倒计时完之后就要显示获取验证码这个标签
7：v-else否则就显示倒计时的时间，且不可点击 我的页面逻辑
-----------------------------------------------------------------------------------------------------------------

// 用户登录
1:在api里面定义api并暴露出去
2:导入api
3：在确定按钮下面的then函数中 登录接口调用
4：保存用户信息
5：保存token
-----------------------------------------------------------------------------------------------------------------

设置token
1：创建local.js定义一些token处理的工具型方法
2：设置 function setLocal(key,value){window.localStorage.setItem(key,value)}
3：获取 function getLocal(key){return window.localStorage.getItem(key)}
4：删除 function removeLocal(key){windowlocalStorage.removeItem(key)}
5: 按需导入  export { setLocal,getLocal,removeLocal }
6:在login.vue中按需导入工具型方法
7：在vuex中定义一个userlnfo 定义方法设置userlnfo
8：保存用户信息 打印res this.$store.commit('setUserInfo',res.data.data.user) 第一个是vuex的方法名，第二个参数是值 就是res中你要保存用户信息的
9：在接口调用成功后，保存token

每次登陆都要用if判断 res.data.code 去判断等于200的时候成功 不等于200就提示 很麻烦 每次都要判断，有没有好的方法呢？
1 想导入轻提示 
2：直接响应拦截器里面去判断code===200时正常返回
3：非200时，提示一下（需要导入Toast）
4：return Pronise.reject(new Error('验证码错误'))  Promise.reject抛出一个Promise错误，终止then执行，同时执行了catch（失败方法）并传参reject的值
-----------------------------------------------------------------------------------------------------------------

// home 首页
1：在home.vue 加入路由出口
2：创建一个home基本组件
3：创建子组件路由对应的组件
4：配置路由与重定向

vant 中的路由模式
特点：点击后跳转至相对应的路由地址
使用：在van-tabbar 上加一个route  van-tabbar-item上配置 to="跳转路由地址"
-----------------------------------------------------------------------------------------------------------------


我的页面中 有很多的单元格
1:封装一个单元格
2：创建一个公用的单元格组件
3：使用  导入  注册
4：单元格传参 通过props传入三个参数
5：在公用的组件接收参数并渲染
6：注意点 字体图标在标签内使用v-html解析 

placeholder 生成一个等高元素进行占位 

-----------------------------------------------------------------------------------------------------------------

我的页面中 用户的信息实现
1:导入mapState
2：在计算属性中定义  ...mapState([])
3：渲染数据

计算属性
使用场景:依赖一个或者多个值（通过this可以访问的值）产生一个新的值（属性值）
特点：可以当属性使用，它依赖的值变了，它会实时改变，它可以将产生的新值缓存起来

定义：
computed:{
    方法名(){
        return 新的值
    }
}


Vue.use(js文件,参数)
1：如果该js是一个对象，该对象一定有一个install方法，该方法第一个参数一定是一个vue，后面的参数就是Vue.use(js代码，传递的参数)
该对象的install方法会自动执行
2：如果该js是一个function，该对象类似于对象的install方法，也可以接受传参，会自动执行

-----------------------------------------------------------------------------------------------------------------
query与params传值

query路由传值
    传：
    this$router.push(path:'路由地址',query:(参数名：值))
    this.$router.push('路由地址?参数名=值')

    收：this.$route.query.参数名 就可以拿到传过来的值

params传值
    传：this.$router.push(name:'路由配置定义的name值',params:{参数名：值})

    收this.$route.push.params.参数名 就可以拿到传过来的值

二种传值的区别
    query传值页面刷新，值还是存在，params传值页面刷新，值就不存在了，且query传值在url上会体现出来，类似于get请求，parmas传值是不会再url体现的 还有传值只能与name结合使用


    watch:监听某个chang事件
    watch:{
        方法名：写要出监听的值，去掉this，加上引号
        方法名：(newVal,olVal){
            newVal：当前值
            olVal：修改前上一刻的值
        }
    }

 -----------------------------------------------------------------------------------------------------------------

 Vue.use()

 该js如果是对象
    该对象里面一定有一个install方法
    Vue.use就是调用里面的install方法

该js如果是一个function
    Vue.use是function会直接执行
-----------------------------------------------------------------------------------------------------------------

async与await
    特点：将异步代码可以以同步的方式去编写
    1：去掉.then 在.then前的方法加一个await
    2：定义一个变量用于接收 .then返回值 const res= await 方法（）
    3：在await最近的父级方法加一个async

    try catch
    try{
        // 可能出错的代码
    }catch(error){
        // error就是对应的错误信息
        如果不想要error (error)整个删除
        // 如果出错了就执行这里
    }
-----------------------------------------------------------------------------------------------------------------

过滤器
作用：用来帮助我们处理数据
用法：
    定义：
    Vue.filter('filetname',function(value){
        // value 就是使用过滤器的数据
        // 完成要操作的逻辑代码
        // 一定要返回数据
        retrun xxx
    })

    使用： 在标签中
    {{value|filetname}}


生命周期钩子
    beforeCreate: 创建前：还不能访问data与methods
    created:创建后，可以访问data与methods，还不能访问vue渲染后的dom (用于进入页面接口请求)
    beforeMount: 渲染前，读取了el(确定了一个vue使用范围)，但是还没有开始渲染，还不能访问vue渲染后的dom
    mounted: 渲染后，可以访问vue渲染后的dom (用于进入页面dom操作)
    beforeUpdate: 更新前，vue页面中使用的数据已修改，但是还没有完成相应的数据渲染
    updated: 更新后，vue页面中使用的数据已修改且页面已完成相应的数据渲染
    beforeDestroy: 销毁前，都可以访问，准备销毁，往往用于善后(setlnterval,hashChange)工作
    destroyed: 销毁后，中断了渲染，还可以访问访问data与methods，但是不能访问vue渲染后的dom (用于善后 setlnterval,hashChange)工作

    缓存的组件被打开时：执行 activated
    缓存的组件被切换时：执行 deactivated

    
-----------------------------------------------------------------------------------------------------------------
    下拉刷新
    <van-pull-refresh>
        v-model: 是否处于加载中，false：没有处于加载中，true：处于加载中， 下拉过程中它会自动修改成true
        @refresh="刷新方法，刷新完成，手动在方法中让v-model的值=false"

-----------------------------------------------------------------------------------------------------------------
    上拉加载
    <van-list>
        v-model:是否处于加载中，true处于加载中，false：不处于加载中，只要滚动条小时它就自动执行加载，v-model的值自动改变true
        finished:是否加载完成
        finished-text:加载完成最后的文本显示
        @load="加载方法"
    </van-list>
    @load 只要滚动条距离底部小于300它会自动执行，v-model的值变成true，在接口请求完成，v-molde的值变成flase，判断是否加载完成：finished=true
-----------------------------------------------------------------------------------------------------------------
搜索框
<van-search>
    v-model:双向绑定
    show-action：是否显示取消按钮
    @search:搜索事件
    @cancel:取消事件
-----------------------------------------------------------------------------------------------------------------



